<template>
	<view class="u-page">
		<u--form :labelWidth='labelWidth' labelPosition="left" :model="model" ref="form1">
			<u-form-item v-bind="$attrs" :required='item.required' v-for="(item,index) in formSchema" :key="item.field" :label="item.label" :prop="item.field" borderBottom >
				<u--input inputAlign="right" v-if="item.component=='input'" v-model="model[item.field]" border="none"  :placeholder="item.placeholder||'请输入'" v-bind="item.componentProps"></u--input>
				<smma-date v-else-if="item.component=='date'" v-model="model[item.field]" :placeholder="item.placeholder" v-bind="item.componentProps"></smma-date>
				<smma-select :labelWidth='labelWidth' v-else-if="item.component=='select'" v-model="model[item.field]" :placeholder="item.placeholder" v-bind="item.componentProps"></smma-select>
				<smma-picker  v-else-if="item.component=='picker'" v-model="model[item.field]" :placeholder="item.placeholder" v-bind="item.componentProps"></smma-picker>
				<smma-calendar v-else-if="item.component=='calendar'" v-model="model[item.field]" :placeholder="item.placeholder" v-bind="item.componentProps"></smma-calendar>
				<smma-upload  :labelWidth='labelWidth' v-else-if="item.component=='upload'" v-model="model[item.field]"  v-bind="item.componentProps"></smma-upload>
				<u--textarea autoHeight  v-else-if="item.component=='textarea'" v-model="model[item.field]" border="none"  :placeholder="item.placeholder||'请输入'" v-bind="item.componentProps"></u--textarea>
				<view class="u-flex-end" v-else-if="item.component=='switch'">
					<u-switch  v-model="model[item.field]"></u-switch>
				</view>
			</u-form-item>
		</u--form>
		<u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></u-button>
		<u-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset"></u-button>
	</view>
</template>

<script>
	import smmaDate from './components/smma-date.vue';
	import smmaSelect from './components/smma-select.vue';
	import smmaCalendar from './components/smma-calendar.vue';
	import smmaPicker from './components/smma-picker.vue'
	import smmaUpload from './components/smma-upload.vue'
	export default {
		components:{
			smmaDate,
			smmaSelect,
			smmaCalendar,
			smmaPicker,
			smmaUpload
		},
		name: 'app-form',
		props: {
			placeholder:{
				type:String,
				default:'请选择',
			},
			labelWidth: {
			    type: [String, Number],
			    default: uni.$u.props.form.labelWidth
			},
			formSchema: {
				required: true,
				type: Array,
				default: ()=>[]
			},
			initValue:{
				type: Object,
				default: {}
			},
			rules: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				model:{
					
				}
			}
		},
		created() {
			this.formSchema.forEach(item=>{
			
				this.$set(this.model,item.field,this.initValue[item.field])
			})
			console.log(this.model,"this.model");
		},
		mounted() {
			
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
			submit() {
				console.log(this.model,"model")
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(res => {
					this.$emit("save",this.model)
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			reset() {
			
				this.$refs.form1.resetFields()
				this.$refs.form1.clearValidate()
				setTimeout(() => {
					this.$refs.form1.clearValidate(validateList)
					
				}, 10)
			},
			hideKeyboard() {
				uni.hideKeyboard()
			}
		},
	}
</script>

<style lang="scss" scoped>
.u-textarea {
	padding:0;
	text-align: right;
}
.u-flex-end {
	width:100%;
	display: flex;
	justify-content: flex-end;
}
</style>